<template>
  <div>
    <p>watch vs watchEffect</p>
    <p>{{nameRef}}</p>
    <p>{{name}}{{age}}</p>
  </div>
</template>

<script>
import { ref, reactive, toRefs, watch, watchEffect } from "vue";

export default {
  setup() {
    const nameRef = ref(100)
    const state = reactive({
      name: '张梦思',
      age: 20
    })

    return {
      nameRef,
      ...toRefs(state)
    }
  },
}
</script>